<template>
  
  <div class="content">
    <div class="top">
      <image-uploader  @get-image="getImageObj"></image-uploader>
    <div class="radio">
    <el-radio-group v-model="radio">
      <el-radio label="1" size="large" @Click="alertArButton2" border>原创音乐</el-radio>
      <el-radio label="2" size="large" @Click="alertArButton1" border>文章资讯</el-radio>
    </el-radio-group>
  </div>
  <div class="text">
    <text-input :is-article="alertAr" @text="getText" @textarea="getTextarea"></text-input>
  </div>
    </div>
  <el-upload
    v-if="alertAr<=9"
    class="upload-demo"
    drag
    :http-request="uploadMedia"
  >

    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      <em>    <el-button type="primary">点击此处音频</el-button></em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        
      </div>
    </template>
  </el-upload>
</div>
<div class="submitDiv">
  <el-button class="submit" type="primary" @Click="submitUpload">上传</el-button> 
</div>

</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import imageUploader  from "@/components/music-content/imageUploader.vue"
import textInput from "@/components/music-content/textInput.vue"
import {uploadModules} from '@/api/music/music'
import { ref } from 'vue'
import {
  ElMessage,
} from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const alertAr=ref(9)

const alertArButton1=()=>{
  alertAr.value=11
}
const alertArButton2=()=>{
  alertAr.value=9
}


//默认1音乐 2 MV
const radio = ref('1')
const uploadModel=ref({
  image:'',
  text:'',
  textarea:'',
  // 后端判断上传的媒体类型
  media:'',
})
//获取图片
const getImageObj = (imageObj)=>{
  uploadModel.value.image=imageObj
  console.log(uploadModel.value.image)
}
//获取视频
const uploadMedia = (media)=>{
uploadModel.value.media=media.file
}
//获取输入框
const getText=(Text)=>{
  uploadModel.value.text=Text
}
const getTextarea=(Textarea)=>{
  uploadModel.value.textarea=Textarea
}
//提交
const submitUpload=async()=>{
const formdata =new FormData
formdata.append('image',uploadModel.value.image)
formdata.append('module',radio.value)
formdata.append('text',uploadModel.value.text)
formdata.append('textarea',uploadModel.value.textarea)
formdata.append('media',uploadModel.value.media)
console.log(formdata.values)
const res = await uploadModules(formdata)
if(res.code==200){
  ElMessage({ message: "上传成功", type: "success" });
  router.push({
    path: "/steps",
  });
}
}
</script>
<style scoped lang="scss">
.content{
  display: flex;
  flex-direction:column;
  align-items:center
  
}
.top{
  display: flex;
  flex-direction:column;
  align-items:center
}
.submitDiv{
  margin-top: 180px;
  .submit{
    margin-left: 890px;
  }
}
.text{
  margin-top: 50px;
  display: inline-block;
}
.radio{
  margin: auto;
  margin-top: 50px;
}
.upload-demo{
  width: 500px;
  height: 70px;
  margin-top: 10px;
}
.img{
  display: inline-block;
  width: 50px;
}
</style>